<template>
  <div class="wp">
      <p class="phonerighttop">绑定手机</p>
            <div class="phonemain">
                <input type="text"  value="请输入手机号" @click="tophone($event)" @blur="phones($event)">
                <p class="phonewarm">{{txt}}</p>
                <input type="password" name="" placeholder="请输入密码（6-20位号码字符）" @blur="topas($event)" @click="pas($event)"  @keyup="totrim($event)">
                <p class="phonewarm1">{{txt1}}</p>
                <input type="password" name="" placeholder="请再次输入密码确认" @blur="toagainpas($event)" @click="pas($event)"  @keyup="totrim($event)">
                <p class="phonewarm2">{{txt2}}</p>
                <input type="text" value="验证码" @click="tophone($event)" @blur="codes($event)" @keyup="totrim($event)">
                <!-- <img class="phonecode" src="../../assets/imgs/code.png" alt="验证码"> -->
                <!--   ：fresh：父组件向子组件传送刷新验证码的信号；
                @makedCode：子组件向父组件传送验证码的值-->
                <s-identify class="phonecode" :fresh="flags" @makedCode="getMakedCode"></s-identify>
                <span @click="refreshCode" class="phonechange">看不清换一张</span>
                <p class="phonewarm3">{{txt3}}</p>
                <input type="text"  value="手机验证码" @click="tophone($event)" @blur="phonecode($event)">
                <div class="phonebot">获取验证码</div>
                <input id="phonesub" type="submit" value="点击绑定" @click="tosuccess()">

                <!-- 绑定成功 -->
                <p v-if="flag" class="psucess">
                    <i class="phoneicon"></i>
                    恭喜您绑定成功
                </p>
            </div>
  </div>
</template>

<script>
import SIdentify from '../yjl/identify';
export default {
    name:'Binding',
    data(){
        return{
            checkphone:'',//密码
            flag:false,//绑定成功
            phone:'',//电话
            code1:'',//验证码
            phonecode1:'',//手机验证码
            txt:'',//警告
            txt1:'',
            txt2:'',
            txt3:'',
            flags:true,  //该值变化，就会触发刷新
            code:'',  //刷新后的验证码
        }
    },
    components:{
        SIdentify,
    },
    mounted(){
        // 验证码初始化
        this.flags = !this.flags;
    },
    methods:{
        tophone(e) {
            e.target.value = '';
        },
        pas(e){
            e.target.placeholder = '';
        },
        // 电话
        phones(e){
            let reg = /^1[34578]\d{9}$/
            var value = e.target.value;
            if (reg.test(value)) {
                 this.phone = value;
                 this.txt = '';
             }else if(!reg.test(value)) {
                 this.txt = '格式错误';
             }
        },
        // 密码
        topas(e) {
            // console.log(e.target.value);
            var value = e.target.value;
             // 密码验证
             if(value.length<6){
                 this.txt1 = '密码不能少于6位';
             }else if(value.length>20){
                 this.txt1 = '密码不能多于20位';
             }else{
                 this.checkphone = value;
                 this.txt1 = '';
             }
        },
        // 验证密码
        toagainpas(e) {
            var value = e.target.value;
            console.log(value);
            // if(value.length<6){
            //      alert('密码不能少于6位');
            //      this.txt2 = ''
            //  }else if(value.length>20){
            //      alert('密码不能多于20位');
            //  }else 
             if (value !== this.checkphone) {
                 this.txt2 = '密码错误';
             }  else {
                 this.txt2 = '';
             }
        },
        // 验证码
        codes(e){
            this.code1 = e.target.value;
            console.log(this.code);
            if(this.code==e.target.value){
                this.txt3 = '';
            }else{
                this.txt3 = '验证码错误';
            }
        },
        // 手机验证码
        phonecode(e){
            this.phonecode1 = e.target.value;
        },
        // 去空格
        totrim(e) {
          e.target.value=e.target.value.replace(/\s+/g, '');
        },
        // 点击绑定
        tosuccess(){
            if(this.phone==''||this.checkphone==''||this.code1==''||this.phonecode1==''){
                this.flag = false;
                alert('请填写完整');
            }else{
                if(this.txt3==''&&this.txt==''&&this.txt1==''&&this.txt2==''){
                    this.flag = true;
                    this.$store.state.phone = this.phone;
                    // console.log(this.phone);
                }else{
                    alert('请改正错误');
                }
            }
        },
        // 切换验证码
    refreshCode() {
      this.flags = !this.flags;
    },
    getMakedCode(code){
      this.code = code
    //   console.log("getMakedCode:",this.code);
    }
    }
}
</script>

<style  scoped>
.wp {
    width: 1083px;
    height: 623px;
}
.phonerighttop {
    height: 56px;
    border-bottom: 1px solid #e7e7e7;
    line-height: 56px;
    text-align: left;
    padding-left: 20px;
    color: #323333;
    font-size: 18px;
}
input  {
    height: 42px;
    background: #f9f9f9;
    border: 1px solid #d3d3d3;
    padding-left: 13px;
    font-size: 16px;
    color: #999999;
    width: 289px;
    margin-top: 36px;
    margin-left: 30px;
}

::placeholder {
    color: #999999;
}
input:nth-child(7){
    width: 111px;
    margin-right: 20px;
}
/* 内容 */
.phonemain {
    display: flex;
    flex-direction: column;
    position: relative;
}
/* 获取验证码 */
.phonebot {
    height: 32px;
    line-height: 32px;
    width: 100px;
    background: #e8e8e8;
    font-size: 14px;
    color: #9f9f9f;
    position: absolute;
    top: 363px;
    left: 221px;
}
#phonesub {
    height: 50px;
    width: 150px;
    font-size: 20px;
    color: #fff;
    background: #f08200;
    border-radius: 5px;
    border: none;
    outline: none;
    padding-left: 0;
}
/* 验证码 */
.phonecode {
    width: 79px;
    height: 34px;
    position: absolute;
    top: 280px;
    left: 173px;
}
.phonechange {
    position: absolute;
    top: 289px;
    left: 292px;
    font-size: 14px;
    color: #ea5b0c;
}
.psucess {
    height: 184px;
    width: 454px;
    line-height: 184px;
    background: #d9d9d9;
    position: absolute;
    border-radius: 20px;
    top: 162px;
    left: 544px;
    font-size: 24px;
    color: #ea5b0c;
}
.phoneicon {
    display: inline-block;
    height: 42px;
    width: 42px;
    background: url(../../assets/imgs/w-reddui.png) no-repeat;
    vertical-align: middle;
    margin-right: 20px;
}
/* 警告 */
.phonewarm,.phonewarm1,.phonewarm2,.phonewarm3 {
    text-align: left;
    margin-left: 30px;
    margin-top: 10px;
    position: absolute;
    top: 72px;
    color: #f00;
}
.phonewarm1 {
    top: 150px;
}
.phonewarm2 {
    top: 230px;
}
.phonewarm3 {
    top: 320px;
}
</style>